import React, { Component } from 'react'
import { Text, TouchableOpacity, View, ScrollView, Image, TextInput, Alert } from 'react-native'
import { globalColor, pxPage, throttle } from '../../common/Common';
import { connect } from 'react-redux'
import classifyData from '../../redux/actions/ClassifyData';
import Btn from '../../components/Btn'

class MoreMovies extends Component {
    constructor(props) {
        super(props)

        this.state = {
            firsrpage: 1,
            page: 1,
            shownumber: 9,
            lastpage: Math.ceil(this.props.classifyData.length / 9)
        }

        this.props.dispatch(classifyData(this.props.navigation.state.params.title, this.state.page))
    }

    onChangeText = (text) => {
        if (text > 0 || text <= this.state.lastpage) {
            this.setState({ page: text })

        } else {
            Alert.alert(
                "",
                "请输入正确的跳转页数哦~",
                [
                    {
                        text: "确定",
                        onPress: () => console.log("ok"),
                        style: "cancel"
                    },
                ]
            );
        }

    }

    render() {
        return (
            <View>
                {/* 头部 */}
                <View style={{ backgroundColor: '#FEA6C4', flexDirection: 'row', alignItems: 'center', }}>
                    <TouchableOpacity
                        style={{ marginLeft: pxPage(20) }}
                        onPress={() => { this.props.navigation.goBack() }}>
                        <Image
                            source={require('../../common/icon/返回.png')}
                            style={{
                                height: pxPage(25),
                                width: pxPage(25)
                            }} />
                    </TouchableOpacity>
                    <View style={{
                        height: pxPage(65),
                        width: pxPage(330),
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <Text style={{
                            color: '#fff',
                            fontWeight: 'bold',
                            fontSize: 18,
                        }}>{this.props.navigation.state.params.title}</Text>
                    </View>
                </View>

                {/* 位置 */}
                {/* 分页栏 */}
                <View style={{
                    height: pxPage(35),
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginTop: pxPage(20),
                    borderBottomColor: '#ccc',
                    borderBottomWidth: 1,
                }}>
                    <TouchableOpacity
                        onPress={() => {
                            if (this.state.page == 1) {
                                Alert.alert(
                                    "",
                                    "已经在首页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                );
                            } else {
                                this.setState({ page: 1 })
                                this.props.dispatch(classifyData(this.props.navigation.state.params.title, 1))
                            }

                        }}
                    >
                        <Text style={{ color: '#F1687A' }}>首页  </Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={() => {
                            var tmp = this.state.page
                            if (tmp <= 1) {
                                Alert.alert(
                                    "",
                                    "已经在首页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                )
                            } else {
                                tmp = tmp - 1;

                                this.setState({ page: tmp })
                                this.props.dispatch(classifyData(this.props.navigation.state.params.title, tmp))
                            }

                        }}
                    >
                        <Text style={{ color: '#F1687A' }}>上一页  </Text>
                    </TouchableOpacity>

                    <Text style={{ color: '#F1687A' }}>第 </Text>
                    <TextInput
                        value={this.state.page <= '' + this.state.lastpage ? '' + this.state.page : this.state.lastpage}
                        onChangeText={text => {
                            this.onChangeText(text)
                        }}
                        placeholder={'' + this.state.page}
                        style={{
                            paddingTop: 0,
                            paddingBottom: 0,
                            borderWidth: 1,
                            borderColor: '#FEA6C4'
                        }}></TextInput>
                    <Text style={{ color: '#F1687A' }}> /{this.state.lastpage}页</Text>

                    <TouchableOpacity
                        onPress={() => {
                            if (this, this.state.page > this.state.lastpage) {
                                Alert.alert(
                                    "超过最大页数",
                                    "没有这么多页了哦，最后一页在这里~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                )
                                this.props.dispatch(classifyData(this.props.navigation.state.params.title, this.state.lastpage))
                            } else this.props.dispatch(classifyData(this.props.navigation.state.params.title, this.state.page))
                        }}>
                        <Text style={{ color: '#F1687A' }}>  跳转  </Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={() => {
                            var tmp = this.state.page
                            if (tmp >= this.state.lastpage) {
                                Alert.alert(
                                    "",
                                    "已经在尾页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                )
                            } else {
                                tmp = tmp + 1;
                                this.setState({ page: tmp })
                                this.props.dispatch(classifyData(this.props.navigation.state.params.title, tmp))
                            }

                        }}
                    >
                        <Text style={{ color: '#F1687A' }}>下一页</Text>
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={() => {
                            if (this.state.page == this.state.lastpage) {
                                Alert.alert(
                                    "",
                                    "已经在尾页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                );
                            } else {
                                this.setState({ page: this.state.lastpage })
                                this.props.dispatch(classifyData(this.props.navigation.state.params.title, this.state.lastpage))
                            }

                        }}
                    >
                        <Text style={{ color: '#F1687A' }}>  尾页  </Text>
                    </TouchableOpacity>

                </View>

                {/* list */}
                <ScrollView>
                    {this.props.classifyData.data?.map((item, index) => {
                        return <View key={index} style={{ marginBottom: pxPage(15) }}>
                            <View style={{
                                flexDirection: "row",
                                height: pxPage(190),
                                alignContent: 'center',
                                justifyContent: 'center',
                                alignItems: 'center',
                                marginTop: pxPage(10),
                                marginBottom: pxPage(10)

                            }}>
                                {/* 动漫封面部分 */}
                                <Image
                                    style={{
                                        width: pxPage(126),
                                        height: pxPage(171),
                                        borderWidth: 1.5,
                                        borderColor: '#F1687A',
                                        shadowColor: '#999',
                                    }}
                                    source={{ uri: item.img }}></Image>

                                {/* 文字简介部分 */}
                                <View style={{
                                    width: pxPage(245), height: pxPage(171), paddingLeft: pxPage(15)
                                }}>
                                    <Text style={{
                                        fontWeight: 'bold',
                                        fontSize: 15,
                                        marginBottom: pxPage(10)
                                    }}>{item.name}</Text>

                                    <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>类型: {item.type}</Text>
                                    <Text style={{ color: '#666', fontSize: 13, marginBottom: pxPage(3) }}>分类: {item.region} {item.lndexes} {item.label}</Text>
                                    <Text style={{ fontSize: 13, color: '#888' }}>简介: {item.introduction.length <= 60 ? item.introduction : item.introduction.slice(0, 60) + '...'}</Text>

                                </View>
                            </View>

                            {/* 分集部分 */}
                            <View style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                                marginLeft: pxPage(20)
                            }}>

                                <View style={{
                                    flexDirection: 'row',
                                    alignItems: 'center',
                                }}>
                                    <Image style={{
                                        width: pxPage(25),
                                        height: pxPage(25),
                                        marginRight: pxPage(5)
                                    }}
                                        source={require('../../common/icon/花.png')}></Image>
                                    {/* 暂时去掉剧集更新情况 */}
                                    <Text style={{
                                        fontSize: 15,
                                    }}>{item.synopsis.split('，')[0]}</Text>
                                </View>
                                <View style={{ position: 'absolute', right: pxPage(10) }}>
                                    <Btn title={'立即播放'} img={require('../../common/icon/播放.png')} />
                                </View>

                            </View>
                        </View>
                    })}

                    <View style={{
                        height: pxPage(130)
                    }}></View>
                    {/* <ScrollView style={{ height: pxPage(130) }}></ScrollView> */}
                </ScrollView>

            </View>
        )
    }
}

const mapStateToProps = state => {

    return {
        classifyData: state.classifyData
        // recentdata: state.recentData
    }
}

export default connect(mapStateToProps)(MoreMovies)

